<!-- 推广 -->
<template>
    <a-modal 
        :visible="visible"
        :maskClosable="false"
        :destroyOnClose="true"
        :keyboard="false"
        @cancel="closeModal()"
        :footer="null"
        @ok="handleSubmit"
        :closable="false"
        class="container"
        width="400px">
        <!-- <a-input-search placeholder="https://" id="copyUrl" v-model="url" readonly size="large">
            <template slot="enterButton">
                <a-button type="primary" class="copyBtn" data-clipboard-target="#copyUrl">
                    复制
                </a-button>
            </template>
        </a-input-search> -->
        <div class="qrcode">
            <img :src="url"/>
        </div>
        <div class="btn_group">
            <a-space :size="100">
                <a-button @click="closeModal">关闭</a-button>
                <a-button type="primary" @click="downloadIamge">保存至电脑</a-button>
            </a-space>
        </div>
    </a-modal>
</template>

<script>
//import ClipboardJS from "clipboard";
export default {
    name:'',
    components:{},
    directives:{},
    filters:{},
    mixins:[],
    model:{},
    props:{
        visible:{
            type:Boolean,
            default:false,
        },
        id:{
            type:String,
            default:'',
        }
    },
    data(){
        return {
            url:'',
        }
    },
    computed:{},
    watch:{
        id:{
            handler(newVal){
                this.url='';
                if(newVal){
                    this.getExtensionInfo(newVal);
                }
            },
            immediate:true,
        }
    },
    created(){
        
    },
    mounted(){
        // this.$nextTick(() => {
        //     new ClipboardJS(".copyBtn");
        // });
    },
    methods:{
        async getExtensionInfo(id){
            let res=await this.$post('/coupon/promote',{
                couponId:id
            })
            if(res && res.returnCode=='1000'){
                this.url = res.message || '';
            }
        },
        closeModal (freshTable) {
            this.$emit('cancel', freshTable)
        },
        handleSubmit(){
            this.$emit('submit');
        },
        // canvas 下载小程序码
        downloadIamge() {
            let imgsrc = this.url;
            let name = this.name
            console.log(imgsrc,name);
            //下载图片地址和图片名
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function () {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "金桔有品"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },
    },
}
</script>

<style lang="less" scoped>
.container{
    text-align: center;
    .qrcode{
        margin-top:20px;
        img{
            width:200px;
            height:200px;
            background: #aaa;
        }
    }
    .btn_group{
        margin-top:35px;
        padding-bottom: 20px;
    }
}
</style>
